<template>
  <div id="expend">
    <el-row>
      <el-col :xs="4" :sm="4" :md="5" :lg="5" :xl="4">
        <div class="grid-content bg-purple">
          <el-button type="primary" plain @click="handleAdd">添加</el-button>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="10" :lg="10" :xl="12">
        <div class="grid-content bg-purple-light">
          <div>
            <el-input :placeholder="type" ref="content" v-model="searchInput">
              <template slot="prepend">
                <el-dropdown @command="handleCommand">
                  <el-button type="primary">
                    搜索类别<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="消耗品名称">消耗品名称</el-dropdown-item>
                    <el-dropdown-item command="消耗品类型">消耗品类型</el-dropdown-item>
                    <el-dropdown-item command="供应商">供应商</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-input>
          </div>
        </div>
      </el-col>
      <el-col :xs="6" :sm="4" :md="4" :lg="4" :xl="4">
        <div class="grid-content bg-purple">
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </div>
      </el-col>
      <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
        <div class="grid-content bg-purple">
          <!-- <el-button type="info" @click="reset">重置</el-button> -->
          <el-button type="danger" plain @click="reset">重置</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="grid-content bg-purple">
          <Etable></Etable>
          <Page></Page>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="添加消耗品" :visible.sync="dialogAddVisible">
      <el-form :model="addform" :rules="rules" ref="addForm">
        <el-form-item label="消耗品名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="addform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="消耗品价格" :label-width="formLabelWidth" prop="price">
          <el-input v-model="addform.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="消耗品数量" :label-width="formLabelWidth" prop="number">
          <el-input v-model="addform.number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="消耗品类名" :label-width="formLabelWidth" prop="goodsClassifyName">
          <el-select v-model="addform.goodsClassifyName" placeholder="请选择分类">
            <el-option v-for="item in typeCounts" :key="item" :value="item" :label="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="消耗品供货商" :label-width="formLabelWidth" prop="suppliername">
          <el-input v-model="addform.suppliername" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addExit('addForm')">取 消</el-button>
        <el-button type="primary" @click="addOk('addForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Etable from '../ygr/Etable.vue'
import Page from '../../common/Page.vue'
import { mapActions } from 'vuex'
import * as url from '../../../api/ygrapi.js'
export default {
  name: 'Expend',
  components: {
    Etable,
    Page
  },
  data() {
    return {
      searchInput: '',
      type: 'name', //搜索类别
      dialogAddVisible: false,
      addform: {
        name: '',
        price: '',
        number: '',
        goodsClassifyName: '',
        suppliername: ''
      },
      rules: {
        price: [
          { required: true, message: '价格不能为空', trigger: 'blur' },
          { pattern: /^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$/, message: '价格数值不合法', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '数量不能为空', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '数量必须为正整值', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        suppliername: [
          { required: true, message: '供货商不能为空', trigger: 'blur' }
        ],
        goodsClassifyName: [
          { required: true, message: '类名不能为空', trigger: 'change' }
        ],
      },
      formLabelWidth: '120px'

    }
  },
  methods: {
    ...mapActions(['expend/opList', 'expend/getLists']),
    handleCommand(command) { //切换搜索类别
      console.log(command)
      if (command == '消耗品名称') {
        this.type = 'name'
      } else if (command == '消耗品类型') {
        this.type = 'goodsClassifyName'
      } else {
        this.type = 'suppliername'
      }
    },
    handleAdd() { //添加
      this.dialogAddVisible = true;
    },
    addOk(formName) { //确定添加
      this.$refs[formName].validate((valid) => {
        if (valid) { //输入的值有效，发送添加请求
          this['expend/opList']([url.addConsumeData, this.addform]).then(res => {
            return this.$store.commit('expend/message', { res: res, tt: this })
          }).catch(err => {
            console.log(err)
          }).then(res=>{
            this['expend/getLists']([url.getConsumeData])
            this.dialogAddVisible = false;
          })
        } else {
          this.$message({
            type: 'danger',
            message: '无法添加!'
          })
          console.log('error submit!!');
          return false;
        }
      });
    },
    addExit(formName) {
      this.$refs[formName].resetFields();
      this.dialogAddVisible = false;
    },
    search() { //搜索
      if (this.searchInput) { //不为空
        let obj = {};
        obj[this.type] = this.searchInput
        console.log(obj)
        this['expend/getLists']([url.searchConsumeData,obj])
      }
    },
    reset() { //重置（重新获取请求数据列表）
      this['expend/getLists']([url.getConsumeData])
      this.searchInput = '' //清空输入框内容
      this.type = 'name' //默认根据name值检索
    }
  },
  computed:{
    typeCounts(){//获取所有消耗品类别名（去重）
      let sCount = new Set();
     this.$store.state.table.allList.forEach((item)=>{
        if (item.con) {
          sCount.add(item.con.goodsClassifyName )
        }
      })
     return [...sCount]
    }
  },
}
</script>

<style lang="less" scoped>
#expend {
  .el-row {
    margin-top: 10px;
  }
}
</style>


